<template>
  <view class="vip">
    <image
      class="vip-header"
      src="/static/images/ucenter/header.jpg"
      mode="scaleToFill"
    />
    <view class="vip-card">
      <view class="vip-card-title">
        <text class="vip-card-title-text">会员中心</text>
      </view>

      <view class="section-title">
        <text class="section-title-text">VIP权益</text>
      </view>
      <view class="pl-20 pr-20 text-gray">
        <view class="text-xs">一、解锁VIP教程：</view>
        <view class="text-xs">二、永久储存作品；</view>
        <view class="text-xs">三、享受VIP专属服务；</view>
        <view class="text-xs">四、享受VIP专属活动；</view>
        <view class="text-xs">五、享受VIP专属推广；</view>
      </view>
      <view class="section-title">
        <text class="section-title-text">VIP套餐</text>
      </view>
      <view class="grid grid-3">
        <view class="grid-item">
          <view
            class="vip-card-item"
            :class="{ active: vipType === 1 }"
            @click="toVipPage(1)"
          >
            <view class="vip-card-item-title"> 至臻会员 </view>
            <view class="vip-card-item-price"> ¥36.8</view>
            <view class="vip-card-item-desc">永久VIP</view>
          </view>
        </view>
        <view class="grid-item">
          <view
            class="vip-card-item"
            :class="{ active: vipType === 2 }"
            @click="toVipPage(2)"
          >
            <view class="vip-card-item-title"> 尊享会员 </view>
            <view class="vip-card-item-price"> ¥26.8</view>
            <view class="vip-card-item-desc">一年VIP</view>
          </view>
        </view>
        <view class="grid-item">
          <view
            class="vip-card-item"
            :class="{ active: vipType === 3 }"
            @click="toVipPage(3)"
          >
            <view class="vip-card-item-title"> 普通会员 </view>
            <view class="vip-card-item-price"> ¥16.8</view>
            <view class="vip-card-item-desc">三个月VIP</view>
          </view>
        </view>
      </view>

      <view class="section-title">
        <text class="section-title-text">支付方式</text>
      </view>

      <view
        class="vip-card-item"
        :class="{ active: paymentType === 1 }"
        @click="changePaymentType(1)"
      >
        <view class="payment-item">
          <view class="payment-item-icon">
            <image src="/static/images/payment/wechat.png" />
          </view>
          <view class="payment-item-content">
            <view class="payment-item-content-title">微信支付</view>
            <view class="payment-item-content-desc">支持微信客户使用</view>
          </view>
          <view class="payment-item-form">
            <view
              class="payment-item-radio"
              :class="{ active: paymentType === 1 }"
            >
              <text class="iconfont icon-select"></text>
            </view>
          </view>
        </view>
      </view>
      <view
        class="vip-card-item mt-20"
        :class="{ active: paymentType === 2 }"
        @click="changePaymentType(2)"
      >
        <view class="payment-item">
          <view class="payment-item-icon">
            <image src="/static/images/payment/alipay.png" />
          </view>
          <view class="payment-item-content">
            <view class="payment-item-content-title">支付宝</view>
            <view class="payment-item-content-desc">支持支付宝客户使用</view>
          </view>
          <view class="payment-item-form">
            <view
              class="payment-item-radio"
              :class="{ active: paymentType === 2 }"
            >
              <text class="iconfont icon-select"></text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <comm-beian></comm-beian>
    <comm-fix-footer></comm-fix-footer>
    <view class="tabbar">
      <view class="tabbar-menu">
        <view class="payment-btn-group">
          <view class="payment-btn-group-price">
            <text v-if="vipType === 1">¥36.8</text>
            <text v-if="vipType === 2">¥26.8</text>
            <text v-if="vipType === 3">¥16.8</text>
          </view>
          <view
            class="payment-btn-group-btn"
            @click="pay"
          >
            立即开通
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "vip",
    data() {
      return {
        vipType: 1,
        paymentType: 1,
      };
    },

    methods: {
      toVipPage(type) {
        this.vipType = type;
      },

      pay() {
        uni.showModal({
          title: "提示",
          content: this.paymentType == 1 ? "微信支付申请中，请稍后" : "支付宝支付申请中，请稍后",
          showCancel: false,
          success: ({ confirm, cancel }) => {},
        });
      },

      changePaymentType(type) {
        this.paymentType = type;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .vip {
    display: flex;
    flex-direction: column;
    align-items: center;
    &-header {
      width: 750rpx;
      height: 500rpx;
      position: relative;
      z-index: 1;
    }

    &-card {
      position: relative;
      z-index: 2;
      margin-top: -200rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;

      width: 680rpx;
      background: rgba($color: #fff, $alpha: 0.85);
      padding: 30rpx;
      border-radius: $border-radius;
      box-shadow: $box-shadow;

      &-title {
        text-align: center;
        margin-bottom: 30rpx;
        font-size: 36rpx;
        font-weight: bold;
      }
    }

    &-card-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      border: 1rpx solid #ddd;
      border-radius: $border-radius;
      box-shadow: $box-shadow;
      padding: 30rpx 0;
      &-title {
        font-size: 28rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }
      &-price {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
        color: $color-primary;
      }
      &-desc {
        font-size: 24rpx;
        color: #999;
      }

      &.active {
        border-color: $color-primary;
        box-shadow: 0 0 10rpx $color-primary;
      }
    }

    .payment-item {
      padding-left: 20rpx;
      padding-right: 20rpx;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &-icon {
        width: 80rpx;
        height: 80rpx;
        margin-right: 20rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      &-content {
        flex: 1 1 auto;
      }

      &-radio {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        background-color: #fff;
        border: 1rpx solid #ddd;
        margin-right: 10rpx;
        text-align: center;
        font-size: 24rpx;
        color: #999;
        &.active {
          background-color: $color-primary;
          color: #fff;
          border-color: $color-primary;
        }
      }
    }
    .tabbar-menu {
      justify-content: center;
    }
    .payment-btn-group {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 80rpx;
      margin-top: 10rpx;
      background-color: rgba($color: $color-primary, $alpha: 0.7);
      padding: 8rpx;
      width: calc(100% - 40rpx);
      border-radius: 50rpx;
      &-price {
        margin-left: 22rpx;
        font-size: 36rpx;
        font-weight: bold;
        color: $color-white;
        font-weight: bold;
      }
      &-btn {
        display: inline-block;
        padding: 0 40rpx;
        height: 64rpx;
        line-height: 64rpx;
        border-radius: $border-radius;
        background-color: $color-primary;
        color: #fff;
        font-size: 28rpx;
        font-weight: bold;
        text-align: center;
        cursor: pointer;
      }
    }
  }
</style>
